<template>
	<div class="c-table">
		<el-table :data="tableData" stripe>
			<el-table-column prop="id" label="ID" width="40"></el-table-column>
			<el-table-column prop="address" label="图片" >
				<template slot-scope="scope">
					<img :src="scope.row.address" alt="无图" height="40">
				</template>
			</el-table-column>
			<el-table-column prop="name" label="分类名称" width="140"></el-table-column>
			<el-table-column label="属性管理" align='center' width="80">
				<template slot-scope="scope">
					<i class="el-icon-s-operation" @click="jump2Property(scope.row.id)"></i>
				</template>
			</el-table-column>
			<el-table-column label="产品管理" align='center' width="80">
				<template slot-scope="scope">
					<i class="el-icon-shopping-cart-2" @click="jump2Product(scope.row.id)"></i>
				</template>
			</el-table-column>
			<el-table-column label="编辑" align='center' width="60">
				<template slot-scope="scope">
					<edit-category :form="scope.row" @flash="getTableData()"></edit-category>
				</template>
			</el-table-column>
			<el-table-column label="删除" align='center' width="60">
				<template slot-scope="scope">
					<del-category :row="scope.row" @flash="getTableData()"></del-category>
				</template>
			</el-table-column>

		</el-table>
    <div style="width: 100%; height: 20px;"></div>
    <page-num :totalPages="totalPages" :currentPage="currentPage"></page-num>
	</div>
</template>

<script>
	import EditCategory from './edit_category.vue'
	import DelCategory from './del_category.vue'
	import PageNum from './page_num.vue'
  import {getCategories} from '@/api/admin/category.js'
	export default{
		data() {
			return {
				tableData: [],
        totalPages:null,
        currentPage:1,
			}
		},
		components: {
			EditCategory,
			DelCategory,
			PageNum
		},
		methods: {
			jump2Property(id) {
				this.$router.push('/admin/property?id='+id)
			},
			jump2Product(id) {
				this.$router.push('/admin/product?id='+id)
			},
      getTableData(){
        // alert(1)
        let data = {
          start:this.currentPage
        }
        getCategories(data).then(response => {
          this.tableData = response.data.pageFromJPA.content
          this.totalPages = response.data.totalPages
        })
      }
		},
    created() {
      this.getTableData()
      this.currentPage = this.$route.query.pageId ? Number(this.$route.query.pageId) : 1
    },
    watch: {
      $route(newValue, oldValue) {
        this.currentPage = this.$route.query.pageId ? Number(this.$route.query.pageId) : 1
        this.getTableData()
      }
    },
	}
</script>

<style scoped>
	.c-table{
		width: 90%;
		margin: 10px auto;
	}
	.c-table i{
		font-size: 20px;
	}
	.c-table i:hover{
		color: #409EFF;
	}
</style>
